<template>
    <div class="breadCrumb" :class="bread_class" :style="bread_style">
        <span v-for="(item,index) in bread_data.data" :key="index" @click="active(item.fun!=null?item.fun:null)">
            <span class="crumb_item_text">{{item.name}}&nbsp;&nbsp;</span>
            <span v-if="bread_data.data[index+1] != null">{{bread_data.split}} </span>&nbsp;
        </span>
    </div>
</template>
<script>
export default {
    name:'g-crumb',
    props:{
        bread_data:{
            type:Object,
            default:{}
        },
        bread_class:{
            type:String,
            default:'default_bread'
        },
        bread_style:{
            type:String,
            default:'margin:10px 0;'
        }
    },
    setup(){
        let active = (fun)=>{
            if(fun!=null){
                fun();
                return ;
            }
            return ;
        }
        return {
            active
        }
    }
}
</script>
<style>
    .breadCrumb{
        border-radius: 5px;
        padding: 10px;
        
    }
    .default_bread{
        border: 1px solid #d9d9d9;
        color: #9b9b9b;
    }
    .dark_bread{
        background-color: #000000d3;
        border: 1px solid #d9d9d9;
        color: #9b9b9b;
    }
    .half{
        width: 50%;
    }
    .one_third{
        width: 33.3333%
    }
    .breadCrumb span {
        cursor: pointer;
    }
    .default_bread .crumb_item_text:nth-last-child(1){
        color: #1c1c1c;
    }
    .dark_bread .crumb_item_text:nth-last-child(1){
        color: white;
    }
</style>